<template>
    <div>
        <el-card>
            <el-tabs class="employee_reimbursement-tabs" type="border-card" v-model="activeName">
                <el-tab-pane label="办公室报账" name="OFFICE"></el-tab-pane>
                <el-tab-pane label="驾驶员报账" name="DRIVER"></el-tab-pane>
            </el-tabs>
            <KeepAlive>
                <OfficeItem v-if="activeName == 'OFFICE'" ref="officeRef" />
            </KeepAlive>
            <KeepAlive>
                <DriverItem v-if="activeName == 'DRIVER'" ref="driverRef" />
            </KeepAlive>
           
        </el-card>

    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import DriverItem from './driver-item.vue'
import OfficeItem from './office-item.vue'
const activeName = ref('OFFICE')
</script>

<style scoped lang='scss'>
</style>

<style>
.employee_reimbursement-tabs>.el-tabs__content {
    padding: 0px;

}
</style>
